<!--
 * @Author: 孙大大
 * @Date: 2022-04-09 16:36:14
 * @LastEditTime: 2022-04-12 22:53:12
 * @FilePath: \黑马面面\src\views\questions\list\form.vue
-->
<template>
  <el-form :inline="true" ref="form" :model="form" label-width="80px">
    <el-form-item label="学科">
      <el-select
        style="width: 280px; height: 30px"
        v-model="form.subjectID"
        @change="subjectChange($event)"
      >
        <el-option
          v-for="item in subjectList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="二级目录">
      <el-select style="width: 280px; height: 30px" v-model="form.catalogID">
        <el-option
          v-for="item in catalogList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </el-form-item>
    <br />
    <el-form-item label="标签">
      <el-select style="width: 280px; height: 30px" v-model="form.tags">
        <el-option
          v-for="item in tagsList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="关键字">
      <el-input
        style="width: 280px; height: 30px"
        v-model="form.keyword"
      ></el-input>
    </el-form-item>
    <br />
    <el-form-item label="试题类型">
      <el-select style="width: 280px; height: 30px" v-model="form.questionType">
        <el-option label="单选" :value="1">单选</el-option>
        <el-option label="多选" :value="2">多选</el-option>
        <el-option label="简答" :value="3">简答</el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="难度">
      <el-select style="width: 280px; height: 30px" v-model="form.difficulty">
        <el-option label="简单" :value="1"></el-option>
        <el-option label="一般" :value="2"></el-option>
        <el-option label="困难" :value="3"></el-option>
      </el-select>
    </el-form-item>
    <br />
    <el-form-item label="方向">
      <el-input
        style="width: 280px; height: 30px"
        v-model="form.direction"
      ></el-input>
    </el-form-item>
    <el-form-item label="录入人">
      <el-input
        style="width: 280px; height: 30px"
        v-model="form.reatorID"
      ></el-input>
    </el-form-item>
    <br />
    <el-form-item label="题目备注">
      <el-input
        style="width: 280px; height: 30px"
        v-model="form.remarks"
      ></el-input>
    </el-form-item>
    <el-form-item label="企业简称">
      <el-input
        style="width: 280px; height: 30px"
        v-model="form.shortName"
      ></el-input>
    </el-form-item>
    <br />
    <!-- 城市选择 -->
    <!-- <el-form-item label="城市">
      <el-select style="width: 140px; height: 30px" v-model="form.province">
        <el-option label="北京市" value="北京市"></el-option>
        <el-option
          label="恩施土家族苗族自治州"
          value="恩施土家族苗族自治州"
        ></el-option>
      </el-select>
      <el-select style="width: 140px; height: 30px" v-model="form.city">
        <el-option label="东城区" value="东城区"></el-option>
        <el-option label="恩施市" value="恩施市"></el-option>
      </el-select>
    </el-form-item> -->
    <el-form-item label="城市">
      <el-select
        style="width: 140px; height: 30px"
        v-model="form.province"
        @change="changeProvince"
      >
        <el-option
          v-for="(item, index) in provincesList"
          :key="index"
          :label="item"
          :value="item"
        ></el-option>
      </el-select>
      <el-select style="width: 140px; height: 30px" v-model="form.city">
        <el-option
          v-for="(item, index) in citysList"
          :key="index"
          :label="item"
          :value="item"
        ></el-option>
      </el-select>
    </el-form-item>
    <div
      class="btn"
      style="display: inline-block; position: relative; left: 208px"
    >
      <el-button @click="resetForm">清除</el-button>
      <el-button type="primary" @click="onSubmit">搜索</el-button>
    </div>
  </el-form>
</template>

<script>
import { provinces, citys } from "@/api/citys";
// 导入题库列表api
import {
  getQuestionList,
  getFormList,
  getCatalogList,
  getTagsList,
} from "@/api/questions";
export default {
  name: "ListForm",
  data() {
    return {
      form: {
        subjectID: "", // 当前学科select选中的值
        catalogID: "", // 当前二级目录select选中的值
        tags: "", // 当前标签select选中的值
        keyword: "", // 当前关键字input的值
        questionType: "", // 当前试题类型select选中的值
        difficulty: "", // 当前难度select选中的值
        direction: "", // 当前方向input的值
        reatorID: "", // 当前录入人input的值
        remarks: "", // 当前题目备注input的值
        shortName: "", // 当前企业简称input的值
        province: "", // 当前市select选中的值
        city: "", // 当前县select选中的值
        page: 1,
        pagesize: 5,
      },
      questionList: [],
      subjectList: [],
      catalogList: [],
      tagsList: [],
      // 省数据列表
      provincesList: [],
      // 市数据列表
      citysList: [],
    };
  },
  async created() {
    this.provinces();
    // 获取题库列表
    getQuestionList({
      page: this.page,
      pagesize: this.pagesize,
    }).then((res) => {
      console.log(55555, res);
      this.questionList = res;
      this.$store.commit("question/setQuestionList", res);
    });
    // 获取学科数据
    getFormList().then((res) => {
      console.log(res);
      this.subjectList = res;
      console.log(this.subjectList);
    });
  },
  methods: {
    // 连续获取选中对应的数据
    async subjectChange(e) {
      // console.log(e);
      this.catalogList = await getCatalogList(e);
      console.log(this.catalogList);
      this.tagsList = await getTagsList(e);
      console.log(this.tagsList);
    },
    // 表单提交事件
    async onSubmit() {
      console.log(this.form);
      // 遍历this.form并用&连接每一项,并且排除每一项值为空的数据
      let str = "";
      for (let key in this.form) {
        if (this.form[key] !== "") {
          str += `&${key}=${this.form[key]}`;
        }
      }
      const res = await getQuestionList(str);
      this.questionList = res;
      console.log(898989, res);
      this.questionList = res;
      this.$store.commit("question/updateQuestionList", res);
      this.$emit("updataQuestionList", this.questionList);
    },
    resetForm() {
      // console.log(1111);
      this.form = this.$options.data().form;
      // this.$refs["form"].resetFields();
    },
    // 获取省列表
    provinces() {
      this.provincesList = provinces();
    },
    // 切换时获取市列表
    changeProvince() {
      this.form.city = "";
      this.citysList = citys(this.form.province);
    },
  },
};
</script>
<style lang="less" scoped></style>
